<!DOCTYPE html>
<html lang="zh-CN">
<!-- 博客更新页面：用于编辑已存在的博客文章 -->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客编辑页</title>

    <!-- 引入公共样式、编辑页面专用样式和editor.md样式 -->
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/edit.css">
    <link rel="stylesheet" href="blogInfo-editormd/css/editormd.css"/>
</head>

<body>
    <!-- 顶部导航栏 -->
    <div class="nav">
        <img src="pic/logo2.jpg" alt="博客系统Logo">
        <span class="blogInfo-title">我的博客系统</span>
        <div class="space"></div>
        <a class="nav-span" href="blog_list.html">主页</a>
        <a class="nav-span" href="blog_edit.html">写博客</a>
        <!-- 注销功能 -->
        <a class="nav-span" href="#" onclick="logout()">注销</a>
    </div>
    
    <!-- 编辑器内容区域 -->
    <div class="content-edit">
        <!-- 标题输入和更新按钮 -->
        <div class="push">
            <!-- 隐藏的博客ID字段 -->
            <input type="hidden" id="blogId">
            <input type="text" name="title" id="title" placeholder="请输入博客标题">
            <input type="button" value="更新文章" id="submit" onclick="submit()">
        </div>
        
        <!-- Markdown编辑器容器 -->
        <div id="editor">
            <!-- 隐藏的文本域，用于存储Markdown内容 -->
            <textarea style="display:none;" id="content">##在这里写下一篇博客</textarea>
        </div>
    </div>

    <!-- 引入jQuery库、editor.md库和公共JavaScript文件 -->
    <script src="js/jquery.min.js"></script>
    <script src="blogInfo-editormd/editormd.min.js"></script>
    <script src="js/common.js"></script>
    <script type="text/javascript">
        // 页面加载时获取博客信息并初始化编辑器
        getBlogInfo();

        /**
         * 更新博客文章
         * 通过Ajax将修改后的博客信息发送到后端进行更新
         */
        function submit() {
            // 获取博客ID、标题和内容
            const blogId = $("#blogId").val();
            const title = $("#title").val().trim();
            const content = $("#content").val().trim();
            
            // 基本验证
            if (!blogId) {
                alert("博客ID不存在");
                return;
            }
            
            if (!title) {
                alert("请输入博客标题");
                return;
            }
            
            if (!content) {
                alert("请输入博客内容");
                return;
            }
            
            $.ajax({
                type: "post",
                url: "/blogInfo/update",
                contentType: "application/json",
                data: JSON.stringify({
                    id: blogId,
                    title: title,
                    content: content
                }),
                success: function (result) {
                    if (result.code == 200 && result.data) {
                        // 更新成功，提示用户并跳转到博客列表页
                        alert("博客更新成功！");
                        location.href = "blog_list.html";
                    } else {
                        // 更新失败处理
                        alert("更新失败：" + (result.errMsg || "未知错误"));
                    }
                },
                error: function() {
                    // 网络或服务器错误处理
                    alert("更新失败：网络或服务器错误");
                }
            });
        }

        /**
         * 获取博客信息
         * 通过Ajax从后端获取指定博客的信息并填充到编辑器中
         */
        function getBlogInfo() {
            $.ajax({
                type: "get",
                url: "/blogInfo/getBlogDetail" + location.search,
                success: function (result) {
                    if (result.code == 200 && result.data != null) {
                        // 成功获取博客信息
                        let blogInfo = result.data;
                        
                        // 填充博客ID、标题和内容
                        $("#blogId").val(blogInfo.id);
                        $("#title").val(blogInfo.title);
                        
                        // 初始化Markdown编辑器并设置内容
                        var editor = editormd("editor", {
                            width: "100%",
                            height: "550px",
                            path: "blogInfo-editormd/lib/",
                            onload: function () {
                                this.watch();
                                this.setMarkdown(blogInfo.content);
                            }
                        });
                    } else {
                        // 获取博客信息失败处理
                        alert("获取博客信息失败：" + (result.errMsg || "未知错误"));
                        location.href = "blog_list.html";
                    }
                },
                error: function(error) {
                    // 处理HTTP错误状态码
                    if (error.status == 401) {
                        location.href = "blog_login.html";
                    } else {
                        alert("获取博客信息失败：网络或服务器错误");
                        location.href = "blog_list.html";
                    }
                }
            });
        }
    </script>
</body>

</html>